/**
 * webpack ./src/main.js ./dist/bundle.js
 *
 * webpack
 **/

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: './src/main.js', // 入口
    output: { // 出口
        path: path.resolve(__dirname, 'dist'), // 需要绝对路径
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },
    module: {
        rules: [{
            test: /\.css$/,
            // css-loader 只负责加载
            // style-loader 进行解析并生效(将模块导出添加样式到DOM)
            // npm install --save-dev style-loader
            // 使用多个 loader 时, webpack 会倒序读取
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.(png|jpg|gif|webp|jpeg)$/,
            use: [{
                loader: "url-loader",
                options: {
                    // 当图片小于该数值, 会导致该图片编译成 base64
                    // 当图片大于该数值, 会使用 file-loader 编译成新文件
                    limit: 4096,
                    name: 'img/[name][hash:8].[ext]' // 自定义命名
                }
            }]
        }, {
            test: /\.vue$/,
            use: [{
                loader: "vue-loader"
            }]
            // },
            // {
            //     test: /\.js$/,
            //     exclude: /(node_modules)/,
            //     use: {
            //         loader: "babel-loader",
            //         options: {
            //             presets: ['es2015']
            //         }
            //     }
        }]
    },
    resolve: {
        extensions: ['.vue', '.js'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.BannerPlugin("这么烂的代码随便用!!!"),
        new HtmlWebpackPlugin({
            template: "index.html"
        }),
        new UglifyJsWebpackPlugin()
    ],
    devServer: {
        contentBase: './dist',
        inline: true // 实时刷新
    }
}
